<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多重变换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .outer {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 0 auto;
            margin-top: 100px;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /*先写scale效果不一样*/
            /*先translate是先从原点到x(100,100),然后开始缩放*/
            /*scale后，坐标系还是在原点,然后从原点到x(100,100),左顶点到x*/
            /* transform: scale(50%,50%) translate(100px,100px) ; */
            
            /*和旋转一起写时，一定要注意先后顺序,最好先写位移*/
            /* transform: translate(100px,100px) rotateZ(30deg); */

            /* 先旋转，旋转后坐标系变了,不在是原点，而是左上角，交叉垂直作为x,y */
            /* 在f12里面，调整translate就会发现原理,且，即使移动后，旋转还是按照最开始原点自己的那个中心点*/
            /* transform:  rotateZ(30deg) translate(0px,0px); */

            /* 建议：先位移，最后旋转 */
            transform:  translate(100px,100px) scale(0.5) rotateZ(0deg);

        }

    </style>
</head>
<body>
<div class="outer">
    <div class="inner">
        你好啊
    </div>
</div>

</body>
</html>